<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        .box {
            width: 300px;
            height: 200px;

        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            line-height: 100px;
            text-align: center;

        }

        .father {
            width: 200px;
            height: 200px;
            background-color: red;

            /* 避免外边距塌陷 */
            /* border-top: 1px solid transparent; */
            /* padding-top: 1px; */
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 50px;
        }



        .border1 {
            /* 边框粗细 一般用 px 做单位*/
            border-width: 10px;

            /* 实线边框 dashed 为虚线 */
            border-style: solid;
            /* border-style: dashed; */

            /* 边框颜色 */
            border-color: aquamarine;

            /* 复合写法，没有顺序 */
            /* border: 1px solid red; */

            /* 单独制定某条边框 */
            border-top-color: rgb(0, 162, 255);
        }

        .border2 {
            border: 5px solid blueviolet;
        }

        .padding1 {
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .margin1 {
            margin-bottom: 20px;
        }

        .margin_center {
            margin: auto;
            /* 或 */
            /* margin: 0 auto; */
            /* 或 */
            /* margin-left: auto;
            margin-right: auto; */
        }

        table,
        td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <h4>1、边框</h4>
    <p>border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色</p>
    <div class="box border1">盒子</div>
    <p>边框会影响盒子的实际大小</p>

    <h4>2、padding内边距</h4>
    <p>设置边框与内容之间的距离</p>
    <div class="box border2 padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam totam
        culpa fugiat
        dolorum
        quiaique aliquid
        necessitatibus. Numquam ut
        unde corrupti doloremque quis omnis, minima saepe pariatur exercitationem!</div>
    <br>
    <table cellspacing="0">
        <thead>
            <tr>
                <td>值的个数</td>
                <td>表达意思</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    padding: 5px;
                </td>
                <td>
                    1个值，代表上下左右
                </td>
            </tr>
            <tr>
                <td>
                    padding: 5px 10px;
                </td>
                <td>
                    2个值，代表上下、左右
                </td>
            </tr>
            <tr>
                <td>
                    padding: 5px 10px 5px;
                </td>
                <td>
                    3个值，代表上、左右、下
                </td>
            </tr>
            <tr>
                <td>
                    padding: 5px 10px 5px 10px;
                </td>
                <td>
                    4个值，代表上、右、下、左 顺时针
                </td>
            </tr>
        </tbody>
    </table>
    <p>如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小</p>

    <h4>3、margin外边距</h4>
    <p>控制盒子和盒子之间的距离</p>
    <img src="imgs/margin属性.png" alt="">
    <div class="box2 margin1">1</div>
    <div class="box2">2</div>

    <p>margin简写方式意义与padding一致</p>
    <h5>外边距可以让块级盒子水平居中，但必须满足两个条件：</h5>
    <ol>
        <li>盒子必须指定宽度width</li>
        <li>盒子左右外边距都设置为auto</li>
    </ol>
    <div class="box2 margin_center"></div>

    <h4>4、外边距合并</h4>
    <p>使用margin定义块元素的垂直外边距时，可能会出现外边距的合并</p>
    <h5>① 嵌套块元素垂直外边距的塌陷</h5>
    <p>对于两个嵌套关系的元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值</p>
    <div class="father">
        <div class="son"></div>
    </div>
    <strong>解决方案：</strong>
    <ol>
        <li>可以为父元素定义上边框</li>
        <li>可以为父元素定义上内边距</li>
        <li>可以为父元素添加 overflow:hidden</li>
    </ol>
</body>

</html>